<template>
	<div class="main">
		<div class="main-header" v-if="buttons.length" style="display: flex;justify-content: space-between;">
			<div style="display: flex;">
				<el-input placeholder="请输入昵称或手机号" style="width: 200px;margin-right: 10px;"
					v-model="searchParamCp.quick_search" size="mini" clearable>
				</el-input>
				<!-- <el-select v-model="searchParamCp.sex" size="mini" placeholder="请选择性别"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in sexlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select> -->
				<!-- <shequSelect style="width: 200px;" size="mini" v-model="searchParamCp.community_id"></shequSelect> -->
				<el-select v-model="searchParamCp.is_verifier" size="mini" placeholder="请选择是否是活动管理员"
					style="width: 200px;margin-right: 10px;margin-left: 10px;">
					<el-option v-for="(item, index) in is_verifierlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select>
				<div class="timepick">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button style="margin-left: 10px;" type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>
			<div>
				<el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType" :icon="item.icon"
					:disabled="item.path | formatDisabled(selection)" @click="tapButton(item)" size="mini">{{ item.title
					}}</el-button>
			</div>

		</div>
		<el-table v-if="memberData.length" :summary-method="getSummaries" show-summary ref="table" class="main-table"
			:data="memberData" height="100%" border header-cell-class-name="main-table-header"
			@selection-change="onSelectionChange" @row-click="onRowClick">
			<el-table-column type="selection" width="39"></el-table-column>
			<el-table-column align="center" label="客户名称" prop="name" />
			<el-table-column label="头像">
				<template slot-scope="{row}">
					<el-image style="width:60px;height:60px;border-radius: 100%" :src="row.wxPhotoURL"
						:preview-src-list="[row.wxPhotoURL]">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="性别">
				<template slot-scope="{row}">
					<el-tag v-if="row.sex == 0">男</el-tag>
					<el-tag type="warning" v-if="row.sex == 1">女</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="身高" prop="height" />
			<el-table-column align="center" label="出生日期" prop="birthday" />
			<el-table-column align="center" label="电话号码" prop="phoneNumber" />
			<el-table-column label="活动管理员">
				<template slot-scope="{row}">
					<!-- 是否核销员 0否 1是 -->
					<el-tag v-if="row.is_verifier == 1">是</el-tag>
					<el-tag type="warning" v-if="row.is_verifier == 0">否</el-tag>
				</template>
			</el-table-column>
			<!-- 0.未知1.大专以下2大专3本科4.硕士研究生5.博士研究生 -->
			<el-table-column label="学历">
				<template slot-scope="{row}">
					<el-tag v-if="row.education == 0">未知</el-tag>
					<el-tag type="warning" v-if="row.education == 1">大专以下</el-tag>
					<el-tag type="success" v-if="row.education == 2">大专</el-tag>
					<el-tag type="info" v-if="row.education == 3">本科</el-tag>
					<el-tag type="danger" v-if="row.education == 4">硕士研究生</el-tag>
					<el-tag type="warning" v-if="row.education == 5">博士研究生</el-tag>
				</template>
			</el-table-column>
			<!-- "男", "女", -->
			
			
			<!-- <el-table-column label="商品管理员">
				<template slot-scope="{row}">
					<el-tag v-if="row.is_goods_hx == 1">是</el-tag>
					<el-tag type="warning" v-if="row.is_goods_hx == 0">否</el-tag>
				</template>
			</el-table-column> -->
			<!-- <el-table-column
                align="center"
                label="会员等级"
                prop="memberLevelName"
            /> -->
			<!-- <el-table-column
                align="center"
                width="100px"
                label="首次消费日期"
                prop="firstCostDate"
            />
            <el-table-column
                align="center"
                width="100px"
                label="最近消费日期"
                prop="latestCostDate"
            /> -->
			<!-- <el-table-column align="center" label="消费积分" prop="fScore" />
            <el-table-column align="center" label="消费次数" prop="costTime" /> -->
			<!-- <el-table-column
                align="center"
                width="100px"
                label="今年消费金额"
                prop="costThisYear"
            /> -->
			<!-- <el-table-column
                align="center"
                width="100px"
                label="消费总金额"
                prop="costAmount"
            /> -->
			<!-- <el-table-column align="center" label="余额" prop="balance" /> -->
			<!-- <el-table-column align="center" label="积分" prop="integral" /> -->
			<!-- <el-table-column align="center" label="地区" prop="area" />
            <el-table-column align="center" label="地址" prop="address" /> -->
			<!-- <el-table-column align="center" label="会员号" prop="vipNum" /> -->
			<el-table-column label="创建时间" prop="createtime">
				<template slot-scope="{row}">
					{{ getTime(row.createtime) }}
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作" width="230">
				<template slot-scope="{row}">
					<el-button type="warning" @click.stop="onCheck(row)">家庭成员明细</el-button>
					<el-button type="primary" @click.stop="onLower(row)" v-if="$auth('lower')">查看下级</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
		<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="1200px" @close="onDialogClose">
			<numinfo @close="close" :formData="userinfo"></numinfo>
		</el-dialog>

		<lowerMember ref="lowerMember"></lowerMember>
		<!-- <Info ref="info" :selection="selection" @close="onDialogClose" /> -->
	</div>
</template>

<script>
import { get, post } from "@/assets/js/http.js";
import shequSelect from "@/components/shequ-select.vue";
import lowerMember from "./lowerMember.vue";
export default {
	name: "view-member",
	data() {
		return {
			memberData: [],
			selection: [],
			page: 1,
			limit: 20,
			total: 0,
			dialogVisible: false,
			dialogTitle: "",
			dialogView: "",
			id: [],//设置代理的id列表
			searchParamCp: {},
			sexlist: ['保密', '男', '女'],//	1男 2女 0保密
			is_verifierlist: ['否', '是'],//是否核销员 0香 1是
			searchinfo: {
				// sex: null,
				quick_search: '',
				search_time: [],
				is_verifier: '',
				community_id: ''
			},
			userinfo: [],
		};
	},
	computed: {
		buttons() {
			return this.$store.state.buttons;
		}
	},
	components: {
		// Photo: () => import("./photo.vue"),
		Search: () => import("./search.vue"),
		Info: () => import("./info.vue"),
		numinfo: () => import("./numinfo.vue"),
		shequSelect,
		lowerMember
	},
	mounted() {
		this.getMemberData();
	},
	methods: {
		onLower(row) {
			this.$refs.lowerMember.open(row.id);
		},
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 7) {
					sums[index] = '活动管理员数：' + this.resAll.verifier_count + '人';
					return;
				}
				// if (index === 6) {
				// 	sums[index] = '商品管理员数：' + this.resAll.goods_hx_count + '人';
				// 	return;
				// }
			});
			console.log(sums)
			return sums;
		},
		getTime(time) {
			let date = new Date(time * 1000)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			// 时分秒
			let hour = date.getHours()
			let minute = date.getMinutes()
			let second = date.getSeconds()
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},
		//关闭弹窗
		close() {
			this.dialogVisible = false
		},
		search(result) {
			this.page = 1;
			console.log(result);
		},
		async getMemberData() {
			const data = await get({
				url: "/admin/user.RealmeritUser/index",
				loading: true,
				params: {
					page: this.page,
					limit: this.limit,
					is_agent: 0,//0用户列表 1代理商列表
					...this.searchinfo,
					...{
						search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
							' - ') : ''
					}
				}
			});
			const list = data.list.list;
			this.total = data.total;
			this.resAll = data.list
			// list.forEach(item => {
			//     item.firstCostDate = item.firstCostDate?.slice(0, 10);
			//     item.latestCostDate = item.latestCostDate?.slice(0, 10);
			// });
			this.memberData = list;
			console.log(this.memberData, list)
		},
		onCurrentChange(index) {
			this.page = index;
			this.getMemberData();
		},
		onCheck(row) {
			// this.dialogTitle = "查看客户照片";
			// this.dialogView = "Photo";
			// this.dialogView = "Info";
			this.dialogVisible = true;
			// this.centerDialogVisible = true
			// this.title = "明细"
			post({
				url: '/admin/user.RealmeritUser/family',
				data: {
					id: row.id
				}
			}).then(res => {
				console.log(res, '12')
				const form = res//JSON.parse(JSON.stringify(res.data))
				this.userinfo = form
				console.log(form, 'form', this.userinfo)
			})
			// this.$refs.info.show();
		},
		searchs() {
			this.page = 1
			this.searchinfo = {
				...this.searchinfo,
				...this.searchParamCp
			}
			this.getMemberData()
		},
		reset() {
			this.page = 1
			this.searchParamCp = {}
			this.searchinfo = {
				quick_search: '',
				search_time: [],
				is_verifier: '',
			},
				this.getMemberData()
		},
		onSearch() {
			this.dialogTitle = "搜索";
			this.dialogView = "Search";
			this.dialogVisible = true;
		},
		onSelectionChange(selection) {
			console.log(selection, 'selection')
			this.selection = selection;
		},
		onRowClick(row) {
			// this.$refs.table.toggleRowSelection(row);
			// this.$refs.info.show();
		},
		onDialogClose() {
			this.$refs.table.clearSelection();
		},
		//设为商品核销员
		onset() {
			this.$confirm(
				`此操作将设置${this.selection.length}个商品核销员, 是否继续?`,
				"提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}
			)
				.then(async () => {
					// let query = "";
					// for (let i = 0; i < this.selection.length; i++) {
					// 	const item = this.selection[i];
					// 	if (i > 0) {
					// 		query += "[" + item.id+"]";
					// 	} else {
					// 		query += "[" + item.id+"]";
					// 	}
					// }
					this.selection.forEach(item => this.id.push(item.id))
					await post({
						url: "/admin/user.RealmeritUser/setGoodsVerifier",
						data: {
							id: this.id
						},
						successTip: true,
					});
					this.getMemberData();
					console.log(this.selection, 'this.selection', this.id)
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
		//设为核销员
		onoff() {
			this.$confirm(
				`此操作将设置${this.selection.length}个活动管理员, 是否继续?`,
				"提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}
			)
				.then(async () => {
					this.selection.forEach(item => this.id.push(item.id))
					await post({
						url: "/admin/user.RealmeritUser/setVerifier",
						data: {
							id: this.id
						},
						successTip: true,
					});
					this.getMemberData();
					console.log(this.selection, 'this.selection', this.id)
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
		tapButton(item) {
			if (item.path === "check") {
				this.onCheck();
			} else if (item.path === "search") {
				this.onSearch();
			} else if (item.path === "set") {
				this.onset();
			} else if (item.path === "off") {
				this.onoff();
			}

		}
	}
};
</script>
